<template>
	<div class="addPeople">
		<Row :gutter="16">
			<i-form :model="formItem" :label-width="150" >
				<i-col span="5">
					<Form-item label="状态：">
						<i-select v-model="formItem.state" @on-change="changestate">
							<i-option v-for="item in states" :value="item">{{ item }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择部门：">
						<i-select v-model="formItem.department" @on-change="changedepartment">
							<i-option v-for="item in departments" :value="item.name">{{ item.name }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="5">
					<Form-item label="选择校区：" >
						<i-select v-model="formItem.campus" @on-change="changecampus">
							<i-option v-for="item in campus" :value="item.campusName">{{ item.campusName }}</i-option>
						</i-select>
					</Form-item>
				</i-col>
				<i-col span="8" style="text-align: right">
					<Button type="primary" size="large" @click="exportData"><Icon type="ios-download-outline"></Icon> 导出数据</Button>
				</i-col>
			</i-form>
		</Row>
		<Row :gutter="16">
			<i-table ref="table" border :content="self" :columns="columns" :data="data"></i-table>
		</Row>
		<Row :gutter="16" class="page">
			<Page :total="dataCount" show-total :page-size="pageSize" @on-change="changepage"></Page>
		</Row>
	</div>
</template>

<script>
export default {

	name: 'addPeople',

	data () {
		return {
			formItem:{
				state:'正常',
				department:'技术部',
				campus:'屯溪路校区'
			},
			states:['正常'],
			departments:this.$store.state.allDepartment,
			campus: this.$store.state.allCampus,
			self: this,
			columns: [
			{
				title: '姓名',
				key: 'name',
				render: (h, params) => {
					return h('p', [
						h('a',{
							on: {
								click:(ev) => {
									ev.cancelBubble = true;
									this.add(params.index);
								}
							}
						}, params.row.name)
						]);

				}
			},
			{
				title: '申请部门',
				key: 'updepartment'
			},
			{
				title: '学号',
				key: 'no'
			},
			{
				title: '手机号',
				key: 'phone'
			},
			{
				title: 'QQ',
				key: 'qq'
			},
			{
				title: '校区',
				key: 'campus'
			},
			{
				title: '学院',
				key: 'college'
			},
			{
				title: '专业班级',
				key: 'class'
			},
			{
				title: '性别',
				key: 'sex'
			},
			{
				title: '状态',
				key: 'state'
			},
			{
				title: '申请时间',
				key: 'uptime'
			},
			],
			dataCount:0,
			data: [],
			pageSize:10,
			alldata: [
			{
				name: '邢力',
				no:'2015213740',
				updepartment:'技术部',
				phone:'15256909020',
				email:'986294216@qq.com',
				qq:'986294216',
				campus:'屯溪路校区',
				sex:'男',
				college:'管理学院',
				class:'电子商务2015-2',
				state:'正常',
				uptime:'2017-1-14 15:24:12',
				introduction:'很菜！！！'
			},
			],
		}
	},
	methods:{
		changestate(index){
			console.log(index)
		},
		changedepartment(index){
			console.log(index)
		},
		changecampus(index){
			console.log(index)
		},
		exportData () {
			this.$refs.table.exportCsv({
				filename: `${this.formItem.campus}${this.formItem.department}招新人员`,
				columns: this.columns,
				data: this.alldata
			});
		},
		add(index){
			// console.log(this.data[index])
			this.$emit('openadd',this.data[index])
		},
		changepage(index){
			this.pageno=index-1;
			var datastart = ( index - 1 ) * this.pageSize;
			var dataend = index * this.pageSize;
			if (this.alldata.length<=dataend) {
				dataend=this.alldata.length
			}
			this.data = this.alldata.slice(datastart,dataend);
		},
		getdata(){
			this.dataCount=this.alldata.length;
			if (this.alldata.length<=this.pageSize) {
				this.data=this.alldata
			}else{
				this.data=this.alldata.slice(0,this.pageSize);
			}
		}
	},
	mounted:function () {
		this.getdata();
	}
}
</script>

<style lang="css" scoped>
.addPeople{
	width: 100%;
	height: 100%;
	padding-left: 20px;
	padding-right: 20px
}
.addPeople .page{
	padding-top: 20px;
	padding-right: 20px;
	text-align: right;
}
</style>